<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <script src="../vue.js"></script>
    <style>
      .active {
        background-color: cyan;
      }
      .style {
        font-style: italic;
      }
    </style>
  </head>

  <body>
    <!-- 
        v-bind强制绑定
            基础使用
                v-bind vue中提供的用于对模板中的属性进行强制绑定的指令
                v-bind 指令后的属性值区域就是插值语法区域
                v-bind attr="xxx" 给attr属性强制绑定xxx数据
                v-bind 可以简写为一个:  比如  :attr="xxx"
            动态类名 写法为 class="xxx"  xxx可以是字符串 对象 数组
                字符串写法适用于类名不确定有哪些 可以使用三元判断控制展示的是哪些字符串格式的类名
      -->
    <div id="app">
      <div
        :class="isEnter?'active':''"
        @mouseenter="isEnter=true"
        @mouseleave="isEnter=false"
      >
        class动态绑定-字符串类名只有一个
      </div>
      <div
        :class="isEnter?'active style':''"
        @mouseenter="isEnter=true"
        @mouseleave="isEnter=false"
      >
        class动态绑定-字符串类名有多个
      </div>
    </div>
    <script>
      Vue.config.productionTip = false;

      const vm = new Vue({
        el: "#app",
        data() {
          return {
            isEnter: false,
          };
        },
      });
    </script>
  </body>
</html>
